import React, { Component } from 'react'
import { NavBar, Icon, SearchBar } from "antd-mobile"
import "./searchCenter.scss"
import myaxios from "../../utils/myaxios"
import { withRouter } from "react-router-dom"

class searchCenter extends Component {
  getProductList = (params) => {
    myaxios.get("goods/qsearch", {
      params: {
        query: this.state.inputValue
      }
    }).then((res) => {
      this.setState({
        productList: res
      })
    })
  }
  // 点击返回上一步按钮
  onLeftClick = (params) => {
    window.history.go(-1)
  }
  // 点击跳转到商品详情页面
  handleItemClick = (e) => {
    let goods_id = e.target.getAttribute("data-goods_id")
    this.props.history.push("/goodDetail/" + goods_id)
  }

  state = {
    inputValue: "",
    productList: []
  }

  render() {
    return (
      <div className="searchCenter">
        {/* 搜索中心导航开始 */}
        <NavBar mode="light"
          className="searchCenter-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => this.onLeftClick()}
        >搜索中心</NavBar>
        {/* 搜索中心导航结束 */}
        {/* 搜索框输入开始 */}
        <SearchBar
          className="yg-sc-search"
          value={this.state.inputValue}
          placeholder="Search"
          // 键盘按下enter的时候触发
          onSubmit={value => console.log(value, 'onSubmit')}
          // 清除输入内容触发
          onClear={value => console.log(value, 'onClear')}
          // 聚焦的时候触发
          onFocus={() => console.log('onFocus')}
          // 失去焦点触发
          onBlur={() => console.log('onBlur')}
          // 
          onCancel={() => this.getProductList()}
          showCancelButton
          // 内容输入的时候触发
          onChange={(value) => {
            console.log(value)
            this.setState({
              inputValue: value,
            })
          }}
          cancelText="搜索"
        />
        {/* 搜索框输入结束 */}
        {/* 商品列表展示开始 */}
        <div className="yg-sc-productList" onClick={this.handleItemClick}>
          {this.state.productList.map(val => {
            return (
              <div className="yg-sc-productList-item" key={val.goods_id} data-goods_id={val.goods_id}>
                <div className="productList-item-left" data-goods_id={val.goods_id}></div>
                <div className="productList-item-right" data-goods_id={val.goods_id}>
                  {val.goods_name}
                </div>
              </div>
            )
          })}
        </div>
        {/* 商品列表展示结束 */}

      </div>
    )
  }
}

export default withRouter(searchCenter)
